<script setup>
import { ref } from 'vue'
import avatar from '@/assets/user.png'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router'
import { userPwdService } from '@/api/user.js'

//定义数据模型
const PwdModel = ref({
    old_pwd: '',
    new_pwd: '',
    re_pwd: ''
})

//校验密码的函数
const checkRePassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次确认密码'))
    } else if (value !== PwdModel.value.new_pwd) {
        callback(new Error('请确保两次输入的密码一样'))
    } else {
        callback()
    }
}

//定义表单校验规则
const rules = {
    old_pwd: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }
    ],
    new_pwd: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }
    ],
    re_pwd: [
        { validator: checkRePassword, trigger: 'blur' }
    ]
}

//修改密码的接口
const router = useRouter();
const updateUserPassword = async () => {
    try {
        console.log(PwdModel.value.old_pwd)
        console.log(PwdModel.value.new_pwd)
        console.log(PwdModel.value.re_pwd)
        let result = await userPwdService(PwdModel.value);
        console.log(result);

        ElMessage.success('修改密码成功！正在转到登录界面...');

        //跳转到登录页面
        router.push('/');
        ElMessage({
            type: 'success',
            message: '退出登录成功',
        });
    } catch (error) {
        ElMessage.error(error.message);
    }
}

</script>
<template>
    <div class="card-wrapper">
        <el-card class="page-container" style="width: 40%;">
            <template #header>
                <div class="header">
                    <span>重置密码</span>
                </div>
            </template>

            <el-row justify="center" style="margin-bottom: 20px;">
                <el-avatar :src="avatar" :size="100" />
            </el-row>

            <el-row>
                <el-col :span="21">
                    <el-form :model="PwdModel" :rules="rules" label-width="100px" size="large">
                        <el-form-item label="原密码" prop="old_pwd">
                            <el-input :prefix-icon="Lock" v-model="PwdModel.old_pwd"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="new_pwd">
                            <el-input :prefix-icon="Lock" v-model="PwdModel.new_pwd"></el-input>
                        </el-form-item>
                        <el-form-item label="确认新密码" prop="re_pwd">
                            <el-input :prefix-icon="Lock" v-model="PwdModel.re_pwd"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div class="center-button">
                                <el-button type="primary" @click="updateUserPassword" style="width: 150px;margin-top: 20px;">提交修改</el-button>
                            </div>
                        </el-form-item>

                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>

</template>

<style scoped>
.card-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
}

.center-button {
  width: 100%;
  display: flex;
  justify-content: center;
}

</style>